<template>
  <view class="su-overlay-btn" v-if="!popupOpen">
    <view class="su-overlay-btn__handler" @click="handlerClick">
      <text :class="['iconfont',icon]"></text>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    name: "su-overlay-btn",
    props: {
      icon: {
        type: String,
        default: 'icon-add-new'
      }
    },
    computed: {
      ...mapState(['popupOpen'])
    },
    methods: {
      handlerClick() {
        this.$emit('handler-click')
      }
    }
  }
</script>

<style lang="scss">
  .su-overlay-btn {
    position: fixed;
    left: 30upx;
    bottom: 30upx;
    z-index: 10;
    margin-bottom: var(--window-bottom);

    &__handler {
      width: 88upx;
      height: 88upx;
      border-radius: 88upx;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(10upx);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s;
      box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);

      &:active {
        background-color: rgba(0, 0, 0, 0.3);
      }

      .iconfont {
        font-size: 36upx;
      }
    }
  }
</style>
